<template>
	<!-- 朋友圈美图 -->
	<view>
		<global-navgation title="朋友圈美图"></global-navgation>
		<view class="waterfall" >
			<view class="item" v-for="(item,index) in lists">
				
					<view class="list1">
						<image :src="item.cover_img" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				
			</view>
		
			
			<!-- <view class="item">
				<view class="list4">
					<image src="../../static/images/64.png" mode=""></image>
					<text>这是一首简单的歌</text>
				</view>
			</view>
			<view class="item">
				<view class="list3">
					<image src="../../static/images/64.png" mode=""></image>
					<text>最美的不是下雨天,是曾与你躲过雨的屋檐</text>
				</view>
			</view>
			<view class="item">
				<view class="list5">
					<image src="../../static/images/64.png" mode=""></image>
					<text>这是一首简单的歌</text>
				</view>
			</view>
			<view class="item">
				<view class="list6">
					<image src="../../static/images/64.png" mode=""></image>
					<text>最美的不是下雨天,是曾与你躲过雨的屋檐</text>
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default {
		name: 'friends',
		components: {
			globalNavgation
		},
		data() {
			return {
				lists:[],
				tokens:""
			}
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()			
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		methods:{
			__initClassData() {
				this.$api.get({
					url: '/article/article/image_list',
					data:{token:this.tokens}
				}).then(res => {
						this.lists=res.data
						
						
						console.log(res.data)
					})
				},
		}
	}
</script>
<style scoped>
	.waterfall{
	
	        -moz-column-count:2; /* Firefox */
	
	        -webkit-column-count:2; /* Safari 和 Chrome */
	
	        column-count:2;
	
	        -moz-column-gap:0rpx ;
	
	      -webkit-column-gap:0rpx;
	
	      column-gap:0rpx;
	
	    }
	
	    /*一个内容层*/
	
	    .item{
			width: 340rpx;
	      padding: 11rpx 12rpx;

	      -moz-page-break-inside: avoid;
	
	      -webkit-column-break-inside: avoid;
	
	      break-inside: avoid;
	
	    
	
	    }
	.list1{
		width: 340rpx;
		/* height: 436rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		/* position: relative; */
	}	
	.list1 image{
		width: 340rpx;
		height: 340rpx;
		/* position: absolute; */
		/* left: 0;
		top: 0; */
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		
	}
	.list1 text{
		width: 300rpx;
		/* height: 44rpx; */
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		/* line-height: 44rpx; */
		/* position: absolute;
		left: 20rpx;
		top: 356rpx; */
		display: inline-block;
		padding-left: 20rpx;
		padding-bottom: 36rpx;
	}
	.list2 image{
		width: 340rpx;
		height: 340rpx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.list2 text{
		width: 300rpx;
		height: 88rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		line-height: 44rpx;
		position: absolute;
		left: 20rpx;
		top: 356rpx;
	}
	.list3 text{
		width: 300rpx;
		height: 88rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		line-height: 44rpx;
		position: absolute;
		left: 20rpx;
		top: 356rpx;
	}
	.list4 text{
		width: 300rpx;
		height: 44rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		line-height: 44rpx;
		position: absolute;
		left: 20rpx;
		top: 356rpx;
	}
	.list5 text{
		width: 300rpx;
		height: 44rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		line-height: 44rpx;
		position: absolute;
		left: 20rpx;
		top: 356rpx;
	}
	.list6 text{
		width: 300rpx;
		height: 88rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		color: rgba(0, 0, 0, 0.85);
		font-size: 32rpx;
		line-height: 44rpx;
		margin-top:356rpx ;
		/* left: 20rpx; */
		
	}
	.list2{
		width: 340rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border-radius: 16px;
		position: relative;
	}	
	
	.list3{
		width: 340rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16px rgba(0, 0, 0, 0.08);
		border-radius: 16px;
		position: relative;
	}	
	.list3 image{
		width: 340rpx;
		height: 340rpx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.list4{
		width: 340rpx;
		height: 436rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16px rgba(0, 0, 0, 0.08);
		border-radius: 16px;
		position: relative;
	}
		.list4 image{
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
	.list5{
		width: 340rpx;
		height: 436rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4px 16px rgba(0, 0, 0, 0.08);
		border-radius: 16px;
		position: relative;
	}	
	.list5 image{
		width: 340rpx;
		height: 340rpx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.list6{
		width: 340rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4px 16px rgba(0, 0, 0, 0.08);
		border-radius: 16px;
		position: relative;
	}	
	.list6 image{
		width: 340rpx;
		height: 340rpx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
</style>